<template>
  <div class="cmt-content">
    <h1>发表评论</h1>
    <hr>
    <textarea maxlength="120" v-model="content" placeholder="请输入评论"></textarea>


    <mt-button type="primary" size="large" v-on:click="addcmt">发表</mt-button>

    <div class="cmt-list">
      <transition-group appear tag="ul">
          <li v-for="item in allLists" :key="item.time">
              <p>{{ item.con }}</p>
              <p>{{ item.time }}</p>
               <hr>
          </li>
         
      </transition-group>
    </div>

    <mt-button type="danger" size="large" plain>加载更多</mt-button>
  </div>
</template>

<script>
import {Toast} from 'mint-ui';

export default {
  data() {
    return {
        content:'',
        allLists:[],
        random:'',
        pageIndex:1
    };
  },
  methods: {
      addcmt(){
          if(this.content.length <1){
              Toast({
                  message: '评论内容不可以为空！',
                  duration: 1000
              });
             return;
          }
          this.newID();
         this.allLists.push({ time:this.random,con:this.content });


         //请求数据
        //  this.pageIndex++;
        // this.$http.get("#?id"+this.pageIndex).then(result=>{
        //    //拼接 数组 concat

        // },error=>{

        // })


         //把数据 存入数据库
        //   this.$http.post("#",{time:this.random,con:this.content},{emulateJSON:true}).then(
        //       result=>{

        //       },
        //       error=>{
        //           Toast("获取失败");
        //       }
        //   )

         this.content = ''; 
      },
      newID(){
        this.random = Math.random();
      }
  },
  beforeUpdate() {
    
  }
};
</script>

<style scoped>
.cmt-content h1 {
  font-size: 16px;
  color: #cccccc;
}
.cmt-content .mint-button {
  margin-top: -15px;
}

.v-enter,
.v-leave-to{
    opacity: 0;
    transform: translateY(10px);
}
.v-enter-active,
.v-leave-active{
    transition: all 0.2 ease;
}
</style>
